<template>
	<view class="content-header">
		<view class="header"></view>
		<scroll-view :scroll-y="true" class="scrolly">
			<view v-for="item in addList" class="scrolly-cent">
				<view class="scrolly-cent-item flex-column">
					<view class="flex-row flex-content-between flex-content-center">
						<view class="flex-row flex-item-center">
							<image class="scrolly-cent-img2" src="../../static/index/dz.png" mode="widthFix"></image>
							<view class="flex-column scrolly-cent-txt">
								<view>笑笑      12345678910</view>
								<view>四川省 成都市 双流区 吉龙三街266号 </view>
							</view>
						</view>
						<image class="scrolly-cent-img1" src="../../static/user/sc.png" mode="scaleToFill"></image>
					</view>
				</view>
				<view class="scrolly-foot flex-row flex-content-between">
					<view class="flex-row flex-item-center">
						<image class="scrolly-foot-img1" :src="item.is_default?`../../static/index/ok.png`:`../../static/index/not.png`" mode="scaleToFill"></image>
						<view :class="item.is_default?`selec`:`cunbai`">{{item.is_default?`已设默认`:`默认`}}</view>
					</view>
					<view >
						<view class="xiugai" @tap="changeAddress">修改</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<mu-suspension bottom="0">
			<view class="jiange"></view>
			<view class="foot">
				<view class="tianjia flex-row flex-content-center flex-item-center" @tap="addAddress">
					<image class="tianjia-img" src="../../static/user/tianjia.png" mode="scaleToFill"></image>
					<view>添加收货地址</view>
				</view>
			</view>
		</mu-suspension>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				addList:[
					{
						id:"",
						is_default:false,
					},
					{
						id:"",
						is_default:true,
					},
					{
						id:"",
						is_default:false,
					},
					{
						id:"",
						is_default:false,
					},
					{
						id:"",
						is_default:false,
					},
					{
						id:"",
						is_default:false,
					},
					{
						id:"",
						is_default:false,
					}
				]
			}
		},
		methods:{
			addAddress(){
				uni.navigateTo({
					url:'/pages/user/add_address?title=创建新地址'
				})
			},
			changeAddress(){
				uni.navigateTo({
					url:'/pages/user/add_address?title=修改地址'
				})
			}
		}
	}
</script>

<style lang="scss">
	.jiange{
		width: 750rpx;
		height: 10rpx;
	}
	.tianjia{
		width: 690rpx;
		height: 80rpx;
		background: #FF7336;
		opacity: 1;
		border-radius: 40rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		margin-left: 28rpx;
		>view:nth-child(2){
			margin-left: 12rpx;
		}
	}
	.tianjia-img{
		width: 32rpx;
		height: 32rpx;
	}
	.foot{
		width: 750rpx;
		height: 164rpx;
		background-color: #FFFFFF;
	}
	.xiugai{
		width: 78rpx;
		height: 44rpx;
		background: #FFFFFF;
		border: 2rpx solid #CCCCCC;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 44rpx;
		text-align: center;
		margin-top: 26rpx;
	}
	.selec{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FF7336;
		margin-left: 24rpx;
	}
	.cunbai{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-left: 24rpx;
	}
	.scrolly-foot-img1{
		width: 32rpx;
		height: 32rpx;
	}
	.scrolly-foot{
		width: 690rpx;
		height: 96rpx;
		margin-left: 30rpx;
		line-height: 96rpx;
		margin-bottom: 28rpx;
	}
	.scrolly-cent-item{
		margin-left: 30rpx;
		padding-top: 30rpx;
		margin-right: 30rpx;
		border-bottom: 2rpx solid #F4F4F4;
		padding-bottom: 38rpx;
	}
	.scrolly-cent-txt{
		margin-left: 20rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 15rpx;
		}
	}
	.scrolly-cent-img1{
		width: 27rpx;
		height: 27rpx;
	}
	.scrolly-cent-img2{
		width: 52rpx;
		// height: 52rpx;
	}
	.scrolly-cent{
		width: 750rpx;
		// height: 432rpx;
		background-color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.scrolly{
		width: 750rpx;
		height: calc(100vh - 100rpx - 150rpx);
		// background-color: #FFFFFF;
	}
	.header{
		width: 750rpx;
		height: 2rpx;
	}
</style>